/**
 * echarts 封装，基于 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin)
 * @author zhangpenghe
 * @date 2019-10-25
 */
export default class WxCanvas {
    constructor(ctx, canvasId) {
        this.ctx = ctx;
        this.canvasId = canvasId;
        this.chart = null;

        WxCanvas.initStyle(ctx);
        this.initEvent();
    }

    getContext(contextType) {
        return contextType === '2d' ? this.ctx : null;
    }

    setChart(chart) {
        this.chart = chart;
    }

    attachEvent() {
        // noop
    }

    detachEvent() {
        // noop
    }

    static initStyle(ctx) {
        const styles = [
            'fillStyle',
            'strokeStyle',
            'globalAlpha',
            'textAlign',
            'textBaseAlign',
            'shadow',
            'lineWidth',
            'lineCap',
            'lineJoin',
            'lineDash',
            'miterLimit',
            'fontSize'
        ];

        styles.forEach(style => {
            Object.defineProperty(ctx, style, {
                set: value => {
                    if ((style !== 'fillStyle' && style !== 'strokeStyle') || (value !== 'none' && value !== null)) {
                        ctx[`set${style.charAt(0).toUpperCase()}${style.slice(1)}`](value);
                    }
                },
                get: () => {
                    return null;
                }
            });
        });

        ctx.createRadialGradient = () => ctx.createCircularGradient(arguments);
    }

    initEvent() {
        this.event = {};
        const eventNames = [
            {
                wxName: 'touchStart',
                ecName: 'mousedown'
            },
            {
                wxName: 'touchMove',
                ecName: 'mousemove'
            },
            {
                wxName: 'touchEnd',
                ecName: 'mouseup'
            },
            {
                wxName: 'touchEnd',
                ecName: 'click'
            }
        ];

        eventNames.forEach(name => {
            this.event[name.wxName] = e => {
                const touch = e.mp.touches[0];
                this.chart.getZr().handler.dispatch(name.ecName, {
                    zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
                    zrY: name.wxName === 'tap' ? touch.clientY : touch.y
                });
            };
        });
    }
}
